<template>
    <div class="fillcontain">
        <head-top></head-top>
        <el-form :model="formData.name" :rules="rules" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 0px" labelWidth="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="项目名称">
                        <el-input
                            size="mini"
                            placeholder="项目名称"
                            prefix-icon="el-icon-search"
                            v-model="formData.name">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属类型">
                        <el-select size="mini" v-model="formData.chargeType" placeholder="所属类型"
                                   @change="this.changeChargeType">
                            <el-option
                                v-for="item in chargeTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属类别">
                        <el-select size="mini" v-model="formData.type" placeholder="全部">
                            <el-option
                                v-for="item in thisbalanceTypes"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="编号" v-model="formData.no">
                        <el-input
                            size="mini"
                            placeholder="编号"
                            v-model="formData.num">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否结束">
                        <el-select size="mini" v-model="formData.itemstatus" placeholder="是否结束">
                            <el-option
                                v-for="item in balanceItemStatus"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col offset="8">
                    <el-button type="primary" icon="el-icon-search" @click="submitForm('add')">提交</el-button>
                </el-col>
            </el-row>

        </el-form>

        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">

                <el-table-column
                    property="id"
                    label="排序编号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="项目名称"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    :formatter="formatType"
                    property="chargeType"
                    label="支出类型"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="typedesc"
                    label="所属类别"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    :formatter="formatStatus"
                    property="itemstatus"
                    label="是否结束"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="deleteItem(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import {addBalanceItem, deleteBalanceItem, queryBalanceItem} from '@/api/getData'
    import ElFormItem from "../../node_modules/element-ui/packages/form/src/form-item.vue";

    export default {
        components: {ElFormItem},
        data() {
            return {
                tableData: [],
                thisbalanceTypes: [],
                dialogFormVisible: true,
                value: '',
                formData: {
                    name: '',
                    chargeType: '',
                    type: '',
                    no: '',
                    itemstatus: '',
                },
                offset: 0,
                limit: 10,
                count: 0,
                currentPage: 1,
            }
        }
        ,
        created() {
            if (this.balanceTypeList.length == 0) {
                this.getBalanceTypes();
            }
        },
        computed: {
            ...mapState(['balanceTypeList']),
            ...mapGetters(['schoolList', 'chargeTypeList', 'balanceItemStatus'])
        },
        mounted() {
            this.initData();
        }

        ,
        methods: {
            ...mapActions(['getBalanceTypes']),
            formatType(row, column, cellValue){
                if(row.chargeType=1)
                    return '收入'
                else
                    return '支出'
            },

            formatStatus(row, column, cellValue){
                if(row.itemstatus=1)
                    return '项目进行中'
                else
                    return '项目已结束'
            },

            async initData() {
                const v = await queryBalanceItem({"data": {"pageno": this.currentPage, "pagesize": this.limit}});
                this.tableData = [];
                var list = v.data.values;
                this.count = v.data.totalCount;
                list.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.name = item.name;
                    tableData.typedesc = item.typedesc;
                    tableData.chargeType = item.chargeType;
                    tableData.itemstatus=item.itemstatus;
                    this.tableData.push(tableData);
                })
            },
            changeChargeType(key) {
                this.thisbalanceTypes = [];
                this.formData.type='';
                var list = this.balanceTypeList;
                list.forEach(item => {
                    //alert(item.type);
                    if (item.type == key) {
                        this.thisbalanceTypes.push(item);
                    }
                })


            },
            async deleteItem(a, row) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.confirmdelete(row);
                });
            },
            async confirmdelete(row) {
                var data = {"data": {"id": row.id}}
                await deleteBalanceItem(data)
                this.initData();
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
            },

            async submitForm(formName) {
                try {
                    var data = {"data": this.formData}
                    let result = await addBalanceItem(data);
                    if (result.success == true) {
                        this.initData();
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.formData = {}
                    }
                } catch (err) {
                    console.log(err);
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initData()
            },
        }
        ,

    }

</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }

    .el-form-item__label {
        width: 120px;
        text-align: right;
    }
</style>
